import React from 'react';
import { Card, Typography, List, Tag, Space } from 'antd';
import { StarOutlined, RiseOutlined, FireOutlined } from '@ant-design/icons';

const { Title, Paragraph } = Typography;

const LeadingStockResearch: React.FC = () => {
  const cardStyle = {
    backgroundColor: '#112240',
    borderColor: '#233554',
    marginBottom: '20px',
  };
  
  const cardHeadStyle = {
    backgroundColor: '#112240',
    borderBottomColor: '#233554',
  };
  
  const cardBodyStyle = {
    backgroundColor: '#112240',
  };

  // 头牌股票数据
  const leadingStocks = [
    {
      title: '宁德时代 (300750)',
      industry: '新能源',
      description: '全球动力电池龙头企业，市占率领先，技术创新能力强',
      tags: ['动力电池', '储能', '钠离子电池'],
      rating: 5,
      trend: 'up',
      hot: true,
    },
    {
      title: '比亚迪 (002594)',
      industry: '新能源汽车',
      description: '新能源汽车销量领先，垂直整合产业链，国际化扩张加速',
      tags: ['电动车', '刀片电池', '半导体'],
      rating: 5,
      trend: 'up',
      hot: true,
    },
    {
      title: '隆基绿能 (601012)',
      industry: '光伏',
      description: '全球最大的单晶硅片制造商，技术领先，成本优势明显',
      tags: ['单晶硅片', 'TOPCon', 'HJT'],
      rating: 4,
      trend: 'stable',
      hot: false,
    },
    {
      title: '中芯国际 (688981)',
      industry: '半导体',
      description: '国内领先的晶圆代工企业，工艺持续突破，受益国产替代',
      tags: ['晶圆制造', '先进工艺', '国产替代'],
      rating: 4,
      trend: 'up',
      hot: true,
    },
    {
      title: '药明康德 (603259)',
      industry: '医药',
      description: '全球领先的医药研发服务平台，客户覆盖全球制药巨头',
      tags: ['CRO', 'CDMO', '创新药'],
      rating: 4,
      trend: 'stable',
      hot: false,
    },
  ];

  return (
    <div style={{ padding: '20px' }}>
      <Card 
        title="头牌研究" 
        style={cardStyle}
        headStyle={cardHeadStyle}
        bodyStyle={cardBodyStyle}
      >
        <Typography style={{ color: '#ccd6f6', marginBottom: '20px' }}>
          <Paragraph>
            头牌股票是各行业中的龙头企业，具有较强的竞争优势和成长潜力。
            通过对头牌股票的深入研究，可以把握行业发展趋势和投资机会。
          </Paragraph>
        </Typography>
        
        <List
          itemLayout="vertical"
          dataSource={leadingStocks}
          renderItem={item => (
            <List.Item
              style={{ 
                borderBottom: '1px solid #233554',
                padding: '16px 0'
              }}
              extra={
                <Space>
                  {item.rating === 5 && <StarOutlined style={{ color: '#64ffda', fontSize: '18px' }} />}
                  {item.trend === 'up' && <RiseOutlined style={{ color: '#ff4d4f', fontSize: '18px' }} />}
                  {item.hot && <FireOutlined style={{ color: '#ff7a45', fontSize: '18px' }} />}
                </Space>
              }
            >
              <List.Item.Meta
                title={<span style={{ color: '#64ffda', fontSize: '16px' }}>{item.title}</span>}
                description={<span style={{ color: '#8892b0' }}>{item.industry}</span>}
              />
              <div style={{ color: '#ccd6f6', margin: '10px 0' }}>{item.description}</div>
              <div>
                {item.tags.map(tag => (
                  <Tag color="#233554" key={tag} style={{ margin: '5px 5px 0 0' }}>
                    {tag}
                  </Tag>
                ))}
              </div>
            </List.Item>
          )}
        />
      </Card>
    </div>
  );
};

export default LeadingStockResearch;